import Taro from "@tarojs/taro";
import { Tabbar } from "@taroify/core";
import {
  WapHomeOutlined,
  BagOutlined,
  BullhornOutlined,
  ContactOutlined,
  CashBackRecordOutlined,
  CartOutlined
} from "@taroify/icons";
import "@taroify/icons/index.scss";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "@/store";
import { setActive } from "@/store/reducers/tabbar";
import "./index.scss";
import { useEffect, useState } from "react";

export default function Index() {
  const accountType = useSelector(
    (state: RootState) => state.userInfo.accountType
  );
  const [list, setList] = useState<any>([]);

  useEffect(() => {
    if (accountType === 2) {
      setList([
        {
          pagePath: "/pages/home/index",
          icon: <WapHomeOutlined size={20} />,
          text: "首页",
        },
        {
          pagePath: "/pages/product/index",
          icon: <BagOutlined size={20} />,
          text: "选品",
        },
        {
          pagePath: "/pages/shopCar/index",
          icon: <CartOutlined size={20} />,
          text: "购物车",
        },
        {
          pagePath: "/pages/profile/index",
          icon: <ContactOutlined size={20} />,
          text: "我的",
        },
      ]);
    } else {
      setList([
        {
          pagePath: "/pages/home/index",
          icon: <WapHomeOutlined size={20} />,
          text: "首页",
        },
        {
          pagePath: "/pages/product/index",
          icon: <BagOutlined size={20} />,
          text: "选品",
        },
        {
          pagePath: "/pages/promotion/index",
          icon: <BullhornOutlined size={20} />,
          text: "每日推广",
        },
        {
          pagePath: "/pages/revenue/index",
          icon: <CashBackRecordOutlined size={20} />,
          text: "订单收益",
        },
        {
          pagePath: "/pages/profile/index",
          icon: <ContactOutlined size={20} />,
          text: "店铺",
        },
      ]);
    }
  }, []);

  const selected = useSelector((state: RootState) => state.tabbar.active);
  const dispatch = useDispatch();

  function switchTab(index, url) {
    dispatch(setActive(index));
    Taro.switchTab({ url });
  }

  return (
    <Tabbar value={selected} fixed={true} safeArea="bottom">
      {list.map((item, index) => (
        <Tabbar.TabItem
          key={item.pagePath}
          onClick={() => switchTab(index, item.pagePath)}
          icon={item.icon}
          value={index}
          style={{ color: selected === index ? "#00A2FF" : "" }}
        >
          {item.text}
        </Tabbar.TabItem>
      ))}
    </Tabbar>
  );
}
